<template>
<div>
<el-row :gutter="20">
  <el-col :span="8">
        <el-card class="card-css"> 
        <div class="div1">
           <cpu :cpuinfo="cpuinfo" ref="cpu"></cpu>
        </div>
        </el-card>
  </el-col>
  <el-col  :span="8">
        <el-card class="card-css"> 
        <div class="div1">
             <mem :meminfo="meminfo" ref="mem"></mem>
        </div>
        </el-card>
  </el-col>
  <el-col  :span="8">
        <el-card class="card-css"> 
        <div class="div1">
        <disk :diskinfo="diskinfo" ref="disk"></disk>
        </div>
        </el-card>
  </el-col>

</el-row>

<el-row :gutter="20">
  <el-col :span="12">
        <el-card>
        <div slot="header">
            <span>系统信息</span>
        </div>
        <div>
            主机名称:{{hostinfo.name}}
        </div>
           <el-divider></el-divider>
          <div >
            系统类型:{{hostinfo.os}}
        </div>
           <el-divider></el-divider>
          <div >
            架构:{{hostinfo.arch}}
        </div>
            <el-divider></el-divider>
          <div >
            操作系统版本:{{hostinfo.plate}}
        </div>
          <el-divider></el-divider>
            <div >
            主机id:{{hostinfo.id}}
        </div>
        </el-card>
  </el-col>
  <el-col :span="12">
    <el-card>
    <div slot="header">
        <span>任务统计</span>
    </div>
    <div >
        已完成:{{taskcounts.task_ok}}
    </div>
    <el-divider></el-divider>
      <div >
        进行中:{{taskcounts.task_ing}}
    </div>
        <el-divider></el-divider>
      <div >
        失败:{{taskcounts.task_err}}
    </div>
    </el-card>
  </el-col>
</el-row>
</div>
</template>
<script>
import Mem from '@/components/dashboard/mem.vue'
import Disk from '@/components/dashboard/disk.vue'
import Cpu from '@/components/dashboard/cpu.vue'
export default {
    components:{cpu:Cpu,disk:Disk,mem:Mem},
    data(){
        return {
            taskcounts:{},
            meminfo:{},
            hostinfo:{},
            cpuinfo:{},
            diskinfo:{},
            resData:{
                task:100
            },
            Interval:Object
        }
    },
  mounted(){
     this.getnewdata();
     this.taskcount();
     this.setIntervalfunc()
  },
    methods: {
    setIntervalfunc(){
      this.Interval=setInterval(()=>{
          this.getnewdata();
      },3000)
    },
    taskcount(){
        this.$http.Get(this.$api.dashboard, {}, (res) => {
        this.taskcounts = res 
      });
    },
    getnewdata(){
        this.$http.Get(this.$api.sysinfo, {}, (res) => {
           this.meminfo = res.meminfo;
           this.hostinfo = res.hostinfo;
           this.diskinfo = res.diskinfo;
           this.cpuinfo = res.cpuinfo;
           this.$refs["cpu"].getnewdata()
           this.$refs["mem"].getnewdata()
           this.$refs["disk"].getnewdata()
      });
    }
  },
  destroyed: function () {
    clearInterval(this.Interval)
  },
    
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
  }

.div1 {
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    text-align: justify;

    height:300px;
}
.fontTitle{
    font-weight:bold;
    color:rgb(180, 132, 70);
}
.fontText{
    font-weight:bolder;
    color:steelblue;
}
</style>